<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>明天银行登录</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"/>
    <!--css file-->
    <link rel="stylesheet" href="styles.css"/>
    <script src="js/axios.min.js"></script>
    <!-- 先引入vue的js文件 -->
    <script src="js/vue.min.js"></script>
    <!-- 引入elementUI全局css样式 -->
    <link rel="stylesheet" href="elementUI/index.css">
    <!-- 引入elementUI动态效果 -->
    <script src="elementUI/index.js"></script>
    <style>
        * {
            font-family: "Poppins", sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #282a37;
            background-size: cover;
            background-position: center;
        }

        .wrapper {
            position: relative;
            width: 400px;
            height: 450px;
            background: #3e404d;
            border: 2px solid rgba(255, 255, 255, 0.5);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(15px);
        }

        .wrapper:hover {
            box-shadow: 0 0 40px rgba(255, 255, 255, 0.5);
            background: #46474e;
        }

        .wrapper h1 {
            font-size: 2em;
            color: #fff;
            text-align: center;
        }

        .wrapper .input-box {
            position: relative;
            width: 310px;
            margin: 30px 0;
            border-bottom: 2px solid #fff;
        }

        .wrapper .input-box input {
            width: 100%;
            height: 50px;
            background: transparent;
            outline: none;
            border: none;
            font-size: 1em;
            color: #fff;
            padding: 0 40px 0 5px;
        }

        .wrapper .input-box label {
            position: absolute;
            top: 50%;
            left: 5px;
            transform: translateY(-50%);
            font-size: 1em;
            color: #fff;
            pointer-events: none;
            transition: 0.5s;
        }

        .wrapper .input-box input:focus ~ label,
        .wrapper .input-box input:valid ~ label {
            top: -5px;
        }

        .wrapper .input-box .icon {
            position: absolute;
            right: 8px;
            color: #fff;
            font-size: 1.2em;
            line-height: 57px;
        }

        .wrapper .row {
            margin: -15px 0 15px;
            font-size: 0.9em;
            color: #fff;
            display: flex;
            justify-content: space-between;
        }

        .wrapper .row label {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .wrapper .row a {
            color: #fff;
            text-decoration: none;
        }

        .wrapper .options a:hover {
            text-decoration: underline;
        }

        .wrapper .btn {
            width: 100%;
            height: 40px;
            background: #fff;
            outline: none;
            border: none;
            border-radius: 40px;
            cursor: pointer;
            font-size: 1em;
            font-weight: 500;
            color: #000;
            margin-top: 10px;
        }

        .btn:hover {
            background: #ffffea;
        }

        .wrapper .signup-link {
            font-size: 0.9em;
            color: #fff;
            text-align: center;
            margin: 25px 0 10px;
        }

        .wrapper .signup-link a {
            color: #fff;
            text-decoration: none;
            font-weight: 600;
        }

        .wrapper .signup-link a:hover {
            text-decoration: underline;
        }

        @media (max-width: 360px) {
            .wrapper {
                width: 100%;
                height: 100vh;
                border: none;
                border-radius: 0px;
            }

            .wrapper .input-box {
                width: 290px;
            }

            #img {
                z-index: -90;
            }
        }
    </style>
</head>

<body>
<div class="wrapper">
    <div id="app">
        <h1>Login</h1>
        <div class="input-box">
            <i class="fas fa-envelope icon"></i>
            <input name="username" v-model="form.username" id="usernameInput" type="username" required/>
            <label>Username</label>
        </div>
        <div class="input-box">
            <i class="fas fa-lock icon"></i>
            <input name="password" v-model="form.password" id="passwordInput" type="password" required/>
            <label>Password</label>
        </div>
        <div style="margin: 15px">
            <el-radio-group v-model="form.type" size="medium">
                <el-radio-button label="admin" name="type">管理员</el-radio-button>
                <el-radio-button label="user" name="type">用户</el-radio-button>
            </el-radio-group>
        </div>
        <div style="margin: 15px">
            <el-checkbox v-model="form.mm" name="mm" lable="mm">七天免密</el-checkbox>
            <el-checkbox v-model="form.savePassword" name="savePassword" lable="save">记住密码</el-checkbox>
        </div>
        <div class="row" style="margin: 15px">
            <a @click="forgotman()">Forgot password?</a>
        </div>
        <button type="button" class="btn" @click="submit()">Login</button>
    </div>
</div>
</body>

</html>
<script>
    function getCookie(name) {
        var cookieArr = document.cookie.split(";");
        for (var i = 0; i < cookieArr.length; i++) {
            var cookiePair = cookieArr[i].split("=");
            if (name === cookiePair[0].trim()) {
                return decodeURIComponent(cookiePair[1]);
            }
        }
        return null;
    }
</script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            form: {
                username: '',
                password: '',
                type: 'user',
                mm: false,
                savePassword: false,
                msg: ""
            },
        },
        methods: {
            forgotman: function () {
            },
            // this.$message('this.form.msg');
            submit: function () {
                axios({
                    // 请求方式
                    method: 'post',
                    url: 'login',
                    params: {
                        "username": this.form.username,
                        "password": this.form.password,
                        "type": this.form.type,
                        "mm": this.form.mm,
                        "savePassword": this.form.savePassword
                    },
                    responseType: 'json'
                }).then(response => {
                    // console.log(response.data);
                    let data = response.data;
                    if(data.login) {
                        // console.log(data.redirectUrl);
                        window.location.href = data.redirectUrl;
                    } else {
                        vm.form.username = getCookie("username") != null ? getCookie("username") : "";
                        vm.form.password = getCookie("password") != null ? getCookie("password") : "";
                        vm.form.type = getCookie("type") != null ? getCookie("type") : "user";
                        vm.form.savePassword = getCookie("savePassword") != null;
                        vm.$message(data.msg);
                    }
                }).catch(error => {
                    console.log(error);
                });
            }
        }
    });
</script>
<script>
    axios({
        // 请求方式
        method: 'get',
        url: 'login',
        params: {
            "username": vm.form.username,
            "password": vm.form.password,
            "type": vm.form.type,
            "mm": vm.form.mm,
            "savePassword": vm.form.savePassword
        },
        responseType: 'json'
    }).then(response => {
        console.log(response.data);
        let data = response.data;
        if(data.login) {
            // console.log(data.redirectUrl);
            window.location.href = data.redirectUrl;
        } else {
            vm.form.username = getCookie("username") != null ? getCookie("username") : "";
            vm.form.password = getCookie("password") != null ? getCookie("password") : "";
            vm.form.type = getCookie("type") != null ? getCookie("type") : "user";
            vm.form.savePassword = getCookie("savePassword") != null;
            vm.$message(data.msg);
        }
    }).catch(error => {
        console.log(error);
    });
</script>

</html>